<template>
  <el-card shadow="never" class="card">
    <div slot="header" class="clearfix">
      <span>网站数据</span>
    </div>
    <div class="head-container" style="float:right;">
      <el-button
        class="filter-item"
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="getChartsStatistics"
      >搜索</el-button>
      <el-select v-model="is_active" clearable placeholder="是否在职" class="filter-item" style="width: 140px" @change="getChartsStatistics">
        <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-select v-model="time_type" clearable placeholder="查询时间" class="filter-item" style="width: 140px" @change="getChartsStatistics">
        <el-option v-for="item in timeTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-date-picker
        :picker-options="pickerOptions"
        v-model="pickDatetime"
        class="el-date-picker"
        style="position: relative; width:370px;height:30.5px;top: 1px; padding: 0px 10px"
        type="datetimerange"
        size="small"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        @change="getChartsStatistics"
        @keyup.enter.native="getChartsStatistics">
      </el-date-picker>
    </div>
    <div style="margin-top: 40px">
      <el-row >
        <el-col>
          <div id="myChart" style="width:100%;height:400px"></div>
        </el-col>
        <!-- <el-col :span="8">
          <div id="label_vist" class="grid-content bg-purple" style="width:100%;height:400px"></div>
        </el-col> -->
      </el-row>
    </div>
  </el-card>
</template>

<script>
import 'echarts/theme/macarons.js'
import moment from 'moment'
import { getChartsStatistics } from '@/api/data'

export default {
  data() {
    return {
      start_time: new Date(),
      is_active: 'true',
      time_type: 'create',
      enabledTypeOptions: [
        { key: 'true', display_name: '在职' },
        { key: 'false', display_name: '离职' }
      ],
      timeTypeOptions: [
        { key: 'create', display_name: '创建时间' },
        { key: 'update', display_name: '修改时间' }
      ],
      pickDatetime: [
        new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 90),
        new Date()
      ],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const start = moment(new Date()).set({ hour: 0, minute: 0, second: 0 })
            const end = moment(new Date()).set({ hour: 23, minute: 59, second: 59 })
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '明天',
          onClick(picker) {
            const start = moment(new Date()).add(1, 'days').set({ hour: 0, minute: 0, second: 0 })
            const end = moment(new Date()).add(1, 'days').set({ hour: 23, minute: 59, second: 59 })
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const start = moment(new Date()).add(-1, 'days').set({ hour: 0, minute: 0, second: 0 })
            const end = moment(new Date()).add(-1, 'days').set({ hour: 23, minute: 59, second: 59 })
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getChartsStatistics()
  },
  mounted() {
    // this.label_vist()
    // 自适应
    window.addEventListener('resize', () => {
      this.$echarts.init(document.getElementById('myChart')).resize()
    })
  },
  methods: {
    getChartsStatistics() {
      const params = { }
      if (this.pickDatetime) {
        params['start_time'] = moment(this.pickDatetime[0]).format('YYYY-MM-DD HH:mm:ss')
        params['end_time'] = moment(this.pickDatetime[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      if (this.is_active) {
        params['status'] = this.is_active
      }
      if (this.time_type) {
        params['time_type'] = this.time_type
      }
      getChartsStatistics(params).then(res => {
        if (res.code === 200) {
          this.drawLine(res.data[0], res.data[1], res.data[2])
        }
      }).catch(err => {
        console.log(err)
      })
    },
    drawLine(pe, govNews, publicity) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(
        document.getElementById('myChart'),
        'macarons'
      )
      // 绘制图表
      myChart.setOption({
        title: {
          text: '',
          // subtext: 'https://www.chacewang.net'
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['项目评估', '新闻管理', '公示名单']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: pe[0]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '项目评估',
            type: 'bar',
            data: pe[1],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            name: '新闻管理',
            type: 'bar',
            data: govNews[1],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            name: '公示名单',
            type: 'bar',
            data: publicity[1],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      })
    },
    label_vist() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(
        document.getElementById('label_vist'),
        'macarons'
      )
      // 绘制图表
      myChart.setOption({
        title: {
          text: '网站访问用户类别',
          subtext: '查策网',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['超级管理员', '管理员', '作者', '普通用户', '普通用户', '访客']
        },
        series: [
          {
            name: '用户类别',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: Math.ceil(Math.random() * 1000), name: '超级管理员' },
              { value: Math.ceil(Math.random() * 1000), name: '管理员' },
              { value: Math.ceil(Math.random() * 1000), name: '作者' },
              { value: Math.ceil(Math.random() * 1000), name: '普通用户' },
              { value: Math.ceil(Math.random() * 1000), name: '访客' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.card {
  min-height: 50vh;
}
</style>
